<template>
  <div class="search">
    <van-nav-bar>
      <template #left>
        <van-icon
          name="arrow-left"
          class="left-arrow"
          size="20"
          :style="{'color': '#fff'}"
          @click="$router.push('/home')"
        ></van-icon>
      </template>
      <template #title>
        <van-search
          v-model="value"
          clearable
          placeholder="请输入小区或地址"
        >
          <template #left></template>
          <template #label>
            <span @click="$router.push('/city')">{{city.label}}</span>
            <i class="line"></i>
          </template>
        </van-search>
      </template>
      <template #right>
        <div
          class="ditu"
          @click="$router.push('/map')"
        >
          <i class="iconfont icon-ditu"></i>
        </div>
      </template>
    </van-nav-bar>
    <van-dropdown-menu
      active-color="#21b97a"
      ref="dropdown-menu"
      :overlay="mask"
    >
      <van-dropdown-item
        title="区域"
        ref="dropdown-item1"
      >
        <van-picker
          ref="picker1"
          :show-toolbar="true"
          toolbar-position="bottom"
          :columns="communityList"
          @confirm="onConfirm1"
          @cancel="onCancel1"
        ></van-picker>
      </van-dropdown-item>
      <van-dropdown-item
        title="方式"
        ref="dropdown-item2"
      >
        <van-picker
          ref="picker2"
          :show-toolbar="true"
          toolbar-position="bottom"
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="onCancel2"
        ></van-picker>
      </van-dropdown-item>
      <van-dropdown-item
        title="租金"
        ref="dropdown-item3"
      >
        <van-picker
          ref="picker3"
          :show-toolbar="true"
          toolbar-position="bottom"
          :columns="columns3"
          @confirm="onConfirm3"
          @cancel="onCancel3"
        ></van-picker>
      </van-dropdown-item>
      <van-dropdown-item
        ref="dropdown-item4"
        title="筛选"
        @open="open"
        @closed="mask = true"
      />
      <van-popup
        v-model="show"
        position="right"
        :style="{ width: '75%', height: '100%' }"
        @close="close"
      >
        <div class="selected">
          <!-- 户型 -->
          <div class="title">户型</div>
          <van-checkbox-group v-model="result">
           <van-checkbox :name="item.value" v-for="item in filterValue.roomType" :key="item.value" :class="{active: result.includes(item.value)}">{{item.label}}</van-checkbox>
          </van-checkbox-group>
          <!-- 朝向 -->
          <div class="title">朝向</div>
          <van-checkbox-group v-model="result">
            <van-checkbox :name="item.value" v-for="item in filterValue.oriented" :key="item.value" :class="{active: result.includes(item.value)}">{{item.label}}</van-checkbox>
          </van-checkbox-group>
          <!-- 楼层 -->
          <div class="title">楼层</div>
          <van-checkbox-group v-model="result">
            <van-checkbox :name="item.value" v-for="item in filterValue.floor" :key="item.value" :class="{active: result.includes(item.value)}">{{item.label}}</van-checkbox>
          </van-checkbox-group>
          <!-- 房屋亮点 -->
          <div class="title">房屋亮点</div>
          <van-checkbox-group v-model="result">
            <van-checkbox :name="item.name" v-for="item in list4" :key="item.name" :class="{active: result.includes(item.name)}">{{item.text}}</van-checkbox>
          </van-checkbox-group>
        </div>
        <div class="btn">
          <van-button
            type="default"
            color="#fff"
            @click="onCancel4"
          >清除</van-button>
          <van-button type="primary" @click="onComfirm4">确定</van-button>
        </div>
      </van-popup>
    </van-dropdown-menu>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="item in houseList"
        :key="item.houseCode"
        :title="item.title"
        :desc="item.desc"
        :thumb="baseurl + item.houseImg"
        @click="houseDetail(item.houseCode)"
      >
        <template #price>
          <span :style="{'font-size': '16px'}">{{item.price}}</span> /月
        </template>
        <template #tags>
          <van-tag
            v-for="(ite, index) in item.tags"
            :key="index"
            plain
            type="primary"
          >{{ite}}</van-tag>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
// cityId= AREA %7C 88cff55c-aaa4-e2e0 & area= AREA %7C 88cff55c-aaa4-e2e0 &rentType = true & price=null & more= CHAR %7C 76eb0532-8099-d1f4 %2C        FLOOR %7C 1 %2C AREA %7C 88cff55c-aaa4-e2e0 %2C ORIEN %7C 61e99445-e95e-7f37 %2C true & roomType=ROOM %7C d1a00384-5801-d5cd & oriented=ORIEN %7C 61e99445-e95e-7f37 & characteristic=CHAR %7C 76eb0532-8099-d1f4 & floor=FLOOR %7C 1 & start=1 & end=20*/
import { mapState } from 'vuex'
export default {
  name: 'search-page',
  components: {},
  props: {},
  data () {
    return {
      result: [],
      list4: [
        { text: '集中供暖', name: 'CHAR|f56b9ad7-a97c-b28f' },
        { text: '双卫生间', name: 'CHAR|51ae05f0-7c7a-c24b' },
        { text: '近地铁', name: 'CHAR|76eb0532-8099-d1f4' },
        { text: '随时看房', name: 'CHAR|ee11187b-a631-beef' },
        { text: '精装', name: 'CHAR|1d9bf0be-284f-93dd' },
        { text: '公寓', name: 'CHAR|2d9fb1b2-dbf9-eb64' },
        { text: '独立卫生间', name: 'CHAR|c3d3e453-c3fa-d4af' },
        { text: '押一付一', name: 'CHAR|f838b575-9196-bf13' },
        { text: '独立阳台', name: 'CHAR|479e8f8a-f193-9605' },
        { text: '月租', name: 'CHAR|3870eb95-3f80-e5f8' },
        { text: '限女生', name: 'CHAR|014e0e46-2147-8785' },
        { text: '限男生', name: 'CHAR|7121e024-499d-c929' },
        { text: '新上', name: 'CHAR|41e8322b-3846-d721' }
      ],
      value: '',
      columns: [],
      columns2: [
        { text: '不限', value: null },
        { text: '整租', value: true },
        { text: '合租', value: false }
      ],
      columns3: [
        { text: '不限', value: null },
        { text: '1000及以下', value: 1000 },
        { text: '1000-2000', value: 2000 },
        { text: '2000-3000', value: 3000 },
        { text: '3000-4000', value: 4000 },
        { text: '4000-5000', value: 5000 },
        { text: '5000-7000', value: 7000 },
        { text: '7000以上', value: 100001 }],
      show: false,
      mask: true,
      query: {
        cityId: 'AREA|19b39d4f-8a36-d6f8',
        area: '',
        subway: null,
        rentType: '',
        price: null,
        more: [],
        roomType: null,
        start: 1,
        end: 20
      },
      loading: false,
      finished: false,
      flag: ''
    }
  },
  computed: {
    ...mapState('city', ['city']),
    ...mapState('community', ['communityList', 'houseList', 'filterValue']),
    ...mapState(['baseurl'])
  },
  watch: {},
  created () {
    this.$store.dispatch('community/getCommunity', { id: this.city.value })
    this.$store.dispatch('community/getFilterValue')
  },
  mounted () {
    // this.$store.dispatch('community/getHouse', this.query)
  },
  methods: {
    open () {
      this.show = true
      this.mask = false
    },
    close () {
      this.$refs['dropdown-item4'].toggle()
    },
    onConfirm1 () {
      const arr = this.$refs.picker1.getIndexes()
      this.query.cityId = this.city.value
      this.query.area = this.communityList[arr[0]].children[arr[1]].value
      this.onCancel1()
      this.$store.dispatch('community/getHouse', this.query)
    },
    onCancel1 () {
      this.$refs['dropdown-item1'].toggle()
    },
    onConfirm2 () {
      this.query.roomType = this.$refs.picker2.getColumnValue(0).value
      this.onCancel2()
      this.$store.dispatch('community/getHouse', this.query)
    },
    onCancel2 () {
      this.$refs['dropdown-item2'].toggle()
    },
    onConfirm3 () {
      this.query.price = this.$refs.picker3.getColumnValue(0).value
      this.onCancel3()
      this.$store.dispatch('community/getHouse', this.query)
    },
    onCancel3 () {
      this.$refs['dropdown-item3'].toggle()
    },
    onComfirm4 () {
      this.query.more = this.result.join(',')
      this.$store.dispatch('community/getHouse', this.query)
      this.show = false
    },
    onCancel4 () {
      this.show = false
      this.result = []
    },
    async onLoad () {
      const data = await this.$store.dispatch('community/getHouse', this.query)
      this.loading = false
      this.query.end += 20
      if (this.query.end > data.body.count) {
        this.finished = true
      }
    },
    houseDetail (id) {
      this.$router.push('/housedetail/' + id)
    }
  }
}
</script>

<style scoped lang='less'>
.search {
  padding-bottom: 50px;
}
.ditu {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  border: 2.5px solid #fff;
  .iconfont {
    color: #fff;
  }
}
/deep/.van-nav-bar__title.van-ellipsis {
  width: 75%;
}
/deep/ .van-nav-bar__left {
  padding: 0 10px;
}
/deep/.van-nav-bar__title {
  max-width: 100%;
  .van-search {
    width: 100%;
    position: relative;
    background-color: transparent;
    padding: 0;
    span {
      margin-right: 10px;
      position: relative;
      left: -8px;
      &::before {
        content: "";
        position: absolute;
        top: 40%;
        left: 110%;
        display: block;
        width: 0;
        height: 0;
        border: 4px solid #999;
        border-bottom: 4px solid transparent;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
      }
    }
    .line {
      display: inline-block;
      margin-right: 2px;
      width: 1px;
      height: 15px;
      background-color: #aaa;
      transform: translateY(2px);
    }
    .left-arrow {
      transform: translateX(-10px);
    }
    /deep/ i.van-icon {
      color: #000;
    }
  }
}
.van-dropdown-menu {
  position: sticky;
  top: 0;
  z-index: 999;
  .van-dropdown-item {
    .van-dropdown-item__content {
      .van-field {
        display: none;
      }
    }
  }
}
.van-popup {
  .selected {
    padding: 0 15px;
    .title {
      margin: 15px 0;
    }
    .van-checkbox-group {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      margin-left: 40px;
      padding-bottom: 14px;
      border-bottom: 1px solid #cecece;
      .van-checkbox {
        width: 70px;
        height: 32px;
        border-radius: 5px;
        border: 1px solid #ddd;
        margin: 0 18px 15px 0;
        font-size: 12px;
        color: #888;
        text-align: center;
        /deep/.van-checkbox__icon {
          width: 0;
          height: 0;
          opacity: 0;
        }
        /deep/.van-checkbox__label {
          margin: 0;
          width: 100%;
          height: 100%;
          line-height: 32px;
        }
        &.active {
          border: 1px solid #21b97a;
          background-color: #defaef;
        }
      }
    }
  }
  .btn {
    overflow: hidden;
    position: sticky;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e5e5e5;
    .van-button:first-child {
      width: 40%;
      height: 60px;
      font-size: 18px;
      .van-button__text {
        color: #07c160;
      }
    }
    .van-button:last-child {
      width: 60%;
      height: 60px;
      font-size: 18px;
    }
  }
}
.van-card {
  margin: 0;
  .van-card__thumb {
    width: 106px;
    height: 88px;
  }
  .van-card__title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
  }
  .van-card__desc {
    color: #afb2b3;
  }
  .van-tag {
    margin-top: 5px;
    background-color: #e1f5f8;
    color: #3ebfce;
    padding: 2px 4px;
  }
}
</style>
